<template>
  <div style="width:100%;height:400%;" id="statisticalTable_con"></div>
</template>

<script>
import echarts from "echarts";
export default {
  name: "statisticalTable",
  data() {

    return {
     // props: ['columnName','columnData'],
   
     
    };
  },
  props:{
      columnName:{
        type:Array,
        required:true
      },
      columnData:{
        type:Array,
        required:true
      },
  },
  mounted() {
    setTimeout(() => {
        this.$nextTick(() => {
      // console.log(this.columnName)
      let visiteVolume = echarts.init(
        document.getElementById("statisticalTable_con")
      );
      let xAxisData = [];
      let data1 = [];
      let data2 = [];
      for (let i = 0; i < 20; i++) {
        xAxisData.push("类目" + i);
        data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
        data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
      }

      const option = {
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            // 统计图的列名
           // data: ["采集服务1", "采集服务2", "采集服务3", "采集服务4", "采集服务5", "采集服务6", "采集服务7", "采集服务8", "采集服务9", "采集服务10"],
             data:this.columnName,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "直接访问",
            type: "bar",
            // 控制柱状条的宽度参数
            barWidth: "30%",
            // 数据对应集合
            //data: [200, 52, 200, 334, 390, 330, 220, 390, 330, 220]
            data:this.columnData
          }
        ]
      };

      visiteVolume.setOption(option);

      window.addEventListener("resize", function() {
        visiteVolume.resize();
      });
    });
    }, 200);
  
  }
};
</script>
